<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="cache-control" content="max-age=0"/>
    <meta http-equiv="cache-control" content="no-cache"/>
    <meta http-equiv="expires" content="0"/>
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT"/>
    <meta http-equiv="pragma" content="no-cache"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/common/admin_templ_style.css"/>
    <link rel="stylesheet" type="text/css" href="../api/css/cupertino/jquery-ui-1.10.1.custom.min.css"/>
    <link rel="stylesheet" type="text/css" href="../api/css/jquery.colorpicker.css"/>
    <script src="../api/js/jquery-1.8.3.js" type="text/javascript"></script>
    <script src="../api/js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../api/js/jquery.colorpicker.js"></script>
    <script type='text/JavaScript' src='../../zbw_reporting/scripts/framework_include.js'></script>

    <script type="text/javascript">

        $(function () {
            $("#accordion").accordion();

            $(".hidden-field").hide();

            //Select show/hide option
            $("select#banner-font").bind('change', function(){
                var thisValue = $(this).val();
                if (thisValue != "")
                    $("."+thisValue).show();
            });

            $('span.close').on('click', function(){
                $(this).closest('.hidden-field').hide();
            });

            $('#font-color, #left-panel-bg-color').colorpicker(
                    {
                        parts:'full',
                        alpha:true,
                        showOn:'both',
                        buttonColorize:true,
                        showNoneButton:true
                    });
        });
    </script>
    <style>
        body {
            background:none;
            height: 100%;
        }
        #theme-edit-form {
            height: calc(100% - 42px);
        }
        #theme-edit-form h2 {
            margin-bottom:20px;
        }
        #theme-edit-form h3.ui-accordion-header-active {
            color:#fff;
        }
        #theme-edit-form select {
            padding-left:0;
            white-space:nowrap;
        }
        #theme-edit-form input[type="file"]{
            width: 132px;
        }
        .theme-edit-block {
            margin-left: 10px;
            width: 21%;
        }
        .ui-accordion .theme-edit-content {
            padding:0;
        }
        .theme-edit-content ul {
            padding: 20px 5px;
        }
        .theme-edit-content li label {
            font-size:11px;
            padding-right:10px;
            width:35%;
        }
        .theme-edit-content button.ui-state-default {
            background:none;
            border: none;
        }
        .theme-edit-content span.ui-button-text {
            padding: 0;
            font-style: inherit;
        }
        .hidden-field {
            margin: 5px 0;
        }
        .hidden-field input {
            width:60px;
        }
        .hidden-field select {
            width: 77px;
        }
        .hidden-field span.close {
            padding: 1px 5px;
            display:inline-block;
            background:#aed0ea;
            color: #fff;
            border-radius:3px;
            margin-left:5px;
        }
        .hidden-field span.close:hover {
            cursor:pointer;
            background: #4F7891;
        }

        form, .kpi-preview, .kpi-drill {
            border: 1px solid #9CD6E7;
            border-radius: 5px;
            box-shadow: 0 0 100px #AADCEA;
            margin: 0 auto;
            padding-bottom: 50px;
            width: 98%;
        }
    </style>
</head>
<body>
<div class="tab-frame bi_admin_report_edit">
    <form method="post" METH_NAME="UPDATE" id="theme-edit-form">
        <h2>Theme Editor</h2>
        <div class="theme-edit-block" id="accordion">
            <h3>Banner</h3>
            <div class="theme-edit-content">
                <ul>
                    <li>
                        <label for="banner-font">Title :</label>
                        <select id="banner-font" name="banner-font" maxlength="30">
                            <option value="">Select</option>
                            <option value="font-size">font-size</option>
                            <option value="color">color</option>
                            <option value="font-style">font-style</option>
                        </select>
                        <div class="hidden-field font-size">
                            <label>Font Size</label>
                            <input type="text" name="font-size" value=""/>
                            <span class="close">x</span>
                        </div>
                        <div class="hidden-field color">
                            <label>Color</label>
                            <input id="font-color" type="text" name="color" value=""/>
                            <span class="close">x</span>
                        </div>
                        <div class="hidden-field font-style">
                            <label>Font Style</label>
                            <!--input type="text" name="font-style" value=""/-->
                            <select>
                                <option>inherit</option>
                                <option>italic</option>
                                <option>normal</option>
                                <option>bold</option>
                            </select>
                            <span class="close">x</span>
                        </div>
                    <li>
                </ul>
            </div>
            <h3>Left Sidebar</h3>
            <div class="theme-edit-content">
                <ul>
                    <li>
                        <label for="left-panel-bg">Bacground Image:</label>
                        <input id="left-panel-bg" type="file" value="" name="left-panel-bg">
                    <li>
                    <li>
                        <label for="left-panel-bg">Bacground Color:</label>
                        <input id="left-panel-bg-color" type="text" value="" name="left-panel-bg-color">
                    <li>
                    <li>
                        <label for="left-panel-border">Border Color:</label>
                        <input id="left-panel-border" type="text" value="" name="left-panel-border">
                    <li>

                </ul>
            </div>
            <h3>Center</h3>
            <div class="theme-edit-content">
                <ul>
                    <li>
                        <label for="center-panel-border">Border Color:</label>
                        <input id="center-panel-border" type="text" value="" name="left-panel-border">
                    <li>
                </ul>
            </div>
             <h3>General</h3>
            <div class="theme-edit-content">
                <ul>
                     <li>
                        <label for="body-bg">Bacground Image:</label>
                        <input id="left-panel-bg" type="file" value="" name="left-panel-bg">
                    <li>
                    <li>
                        <label for="left-panel-bg">Bacground Color:</label>
                        <input id="left-panel-bg-color" type="text" value="" name="left-panel-bg-color">
                    <li>
                </ul>
            </div>
        </div>

    </form>
</div>
</body>
</html>